<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="230px">
                <h4 class="mb-2">菜单</h4>
                <el-menu :router="true" default-active="2" class="el-menu-vertical-demo">
                    <template v-for="item in menuData" :key="item.id">
                        <el-menu-item v-if="!item.children" :index="item.path">
                            {{ item.label }}
                        </el-menu-item>
                        <el-sub-menu v-else :index="item.id">
                            <template #title>
                                <span>{{ item.label }}</span>
                            </template>
                            <el-menu-item v-for="sonItem in item.children" :key="sonItem.id" :index="sonItem.path">
                                {{ sonItem.label }}
                            </el-menu-item>
                        </el-sub-menu>
                    </template>

                </el-menu>

            </el-aside>
            <el-container>
                <el-header>
                    <div class="userStatus">
                        用户名：{{ userName }}
                        <el-button color="#fff" @click="exitFn">退出</el-button>
                    </div>
                </el-header>
                <el-main>
                    <!-- <div class="loading" v-if="$piniaStore.isShowLoading">加载中......</div> -->
                    <div v-loading="$piniaStore.isShowLoading">
                        <router-View></router-View>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import $store from "../../store/index"
import getGrants from "../../grants/menuData"
// 获取权限路由配置
import setRoute from "../../grants/router"
// pinia 仓库
import { useStore } from "../../piniaStore"
const $piniaStore = useStore()
const userName = sessionStorage.getItem("adminname")
let menuData = reactive(getGrants())
const $router = useRouter()
if (!$store.state.isGetRoute) {
    setRoute()
}
// 点击退出登录
const exitFn = () => {
    sessionStorage.clear()
    $router.push("/Login")
    window.location.reload()
    ElMessage({
        showClose: true,
        message: "退出成功！！！",
        type: "info"
    })
}
</script>

<style scoped>
h4 {
    height: 60px;
    line-height: 60px;
}

.common-layout {
    width: 100%;
    height: 100%;
}

.el-container {
    height: 100%;

}

.el-aside {
    height: 100%;
    background-color: skyblue;
    text-align: center;
    line-height: 40px;
}

.el-aside .tac {
    width: 100%;
}

.el-header {
    background-color: skyblue;
}

.el-main {

    position: relative;
}

.el-main .loading {
    color: skyblue;
    font-size: 36px;
    font-weight: 800;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.el-header {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

.el-header .userStatus {
    display: flex;
    align-items: center;
    color: #ededed;
    font-weight: bold;
    margin-top: 5px;
}

.el-header .userStatus .el-button {
    margin-left: 10px;

}
</style>